<template>
  <div class="score-container">
    <div class="score-header">
      <div class="header-item">Section</div>
      <div class="header-item">Your Percentile</div>
      <div class="header-item">Your Score</div>
    </div>

    <div class="score-list">
      <div class="score-item" v-for="(item, index) in scoreData" :key="index">
        <div class="section-name">{{ item.name }}</div>
        <div class="percentile">{{ item.percentile }}th</div>
        <div class="score-range">
          <span class="min-score">{{ item.range.min }}</span>
          <div class="score-bar">
            <div class="score-track"></div>
            <div class="score-point" :style="{ left: `${calculatePosition(item)}%` }">
              <div class="point-value">{{ item.score }}</div>
            </div>
            <div class="middle-value">{{ item.range.middle }}</div>
          </div>
          <span class="max-score">{{ item.range.max }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const scoreData = ref([
  {
    name: 'Total Score',
    percentile: 4,
    score: 365,
    range: {
      min: 205,
      middle: 546,
      max: 805
    }
  },
  {
    name: 'Data Insights',
    percentile: 4,
    score: 60,
    range: {
      min: 60,
      middle: 74.4,
      max: 90
    }
  },
  {
    name: 'Quantitative Reasoning',
    percentile: 14,
    score: 70,
    range: {
      min: 60,
      middle: 77.7,
      max: 90
    }
  }
])

const calculatePosition = (item) => {
  const { min, max } = item.range
  return ((item.score - min) / (max - min)) * 100
}
</script>

<style lang="scss" scoped>
.score-container {
  padding: 20px;
  
  .score-header {
    display: grid;
    grid-template-columns: 2fr 1fr 3fr;
    padding: 10px;
    background-color: #f5f5f5;
    font-weight: 500;
    
    .header-item {
      padding: 8px;
    }
  }

  .score-list {
    .score-item {
      display: grid;
      grid-template-columns: 2fr 1fr 3fr;
      padding: 15px 10px;
      align-items: center;
      border-bottom: 1px solid #eee;

      &:nth-child(even) {
        background-color: #f9f9f9;
      }

      .section-name {
        font-weight: 500;
      }

      .percentile {
        color: #666;
      }

      .score-range {
        display: flex;
        align-items: center;
        gap: 10px;

        .min-score, .max-score {
          color: #666;
          font-size: 14px;
          width: 40px;
        }

        .score-bar {
          flex: 1;
          position: relative;
          height: 30px;

          .score-track {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #ddd;
            transform: translateY(-50%);
          }

          .score-point {
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 4px;
            height: 16px;
            background-color: #126983;

            .point-value {
              position: absolute;
              top: -20px;
              left: 50%;
              transform: translateX(-50%);
              color: #126983;
              font-weight: 500;
            }
          }

          .middle-value {
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            color: #666;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>